<template>
    <div>
        <el-row :gutter="24">
            <el-col :md="3" :sm="6">{{ $t('channel name') }}</el-col>
            <el-col :md="4" :sm="8">{{ $t('width') }}</el-col>
            <el-col :md="4" :sm="8">{{ $t('height') }}</el-col>
            <el-col :md="3" :sm="6">{{ $t('smart encode') }}</el-col>
            <el-col :md="2" :sm="4">minQP</el-col>
            <el-col :md="2" :sm="4">maxQP</el-col>
            <el-col :md="2" :sm="4">fixIQP</el-col>
            <el-col :md="2" :sm="4">fixPQP</el-col>
            <el-col :md="2" :sm="4">{{ $t('low latency') }}</el-col>
        </el-row>
        <div v-for="dataItem in dataList">
            <el-divider></el-divider>
            <el-row :gutter="24" style="margin-top:16px" v-for="(data, index) in dataItem.encvList">
                <el-col :md="3" :sm="6">
                    <el-input v-if="index == 0" v-model="dataItem.name" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="4" :sm="8">
                    <el-input v-model="data.width" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="4" :sm="8">
                    <el-input v-model="data.height" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="3" :sm="6">
                    <el-select v-model="data.gopmode" :placeholder="$t('select_placeholder')" style="width: 100%;">
                        <el-option label="Normal" :value="0"></el-option>
                        <el-option label="SmartP" :value="1"></el-option>
                        <el-option label="DualP" :value="2"></el-option>
                        <el-option label="BiPredB" :value="3" v-if="hardware.capability.encode.BFrame"></el-option>
                    </el-select>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.minqp" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.maxqp" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.Iqp" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-input v-model="data.Pqp" :placeholder="$t('input_placeholder')"></el-input>
                </el-col>
                <el-col :md="2" :sm="4">
                    <el-switch v-model="data.lowLatency" inline-prompt active-text="ON" inactive-text="OFF"></el-switch>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
  
<script setup name="video-stream">
const props = defineProps(['data', 'hardware'])
let dataList = ref([])
let hardware = reactive({})

watchEffect(() => {
    hardware = Object.assign(hardware, props.hardware)
    dataList.value = props.data?.length ? props.data.map(item => {
        item.encvList = [item.encv, item.encv2]
        return item
    }) : []

})

onUnmounted(() => {

});

</script>
  
<style scoped lang="scss">
.encode-setting {}
</style>
  
  